<script setup lang="ts">
import seachIcon from '@/assets/images/icon/my-account/search-icon.png';
import rightJt from '@/assets/images/icon/my-account/right-jt.png';
const searchValue = ref('')
const formInputMap = ref({
  name: '',
  num: '',
  time: ''
})
const active = ref(0)
const activeList = ref(0)
const activeNames = ref(['0'])
const collapseChange = (value) => {
  console.log(value)
}
const collapseList = [
  {
    title: '什么是电子钱包？',
    info: '电子钱包是一种可以进行个人电子交易的电子设备，包括网上购物或实体店购物的交易，电子钱包可以与个人的银行帐户关联。里面也可以放置电子驾照、社保卡、身份证或其他 ...'
  },
  {
    title: '什么是电子钱包？',
    info: '电子钱包是一种可以进行个人电子交易的电子设备，包括网上购物或实体店购物的交易，电子钱包可以与个人的银行帐户关联。里面也可以放置电子驾照、社保卡、身份证或其他 ...'
  },
  {
    title: '什么是电子钱包？',
    info: '电子钱包是一种可以进行个人电子交易的电子设备，包括网上购物或实体店购物的交易，电子钱包可以与个人的银行帐户关联。里面也可以放置电子驾照、社保卡、身份证或其他 ...'
  },
]
</script>

<template>
  <div class="container">
    <div class="header">
      <NavBar title="帮助中心" :showRightIcon="false" />
    </div>
    <div class="content">
      <div class="help-center-box">
        <div class="help-center-box-title flex middle">
          <van-tabs v-model:active="active" type="card">
            <van-tab title="常见问题"></van-tab>
            <van-tab title="联系我们"></van-tab>
          </van-tabs>
        </div>
        <div v-if="[0].includes(active)" class="help-center-box-one">
          <div class="search-middle">
            <van-field :left-icon="seachIcon" v-model="searchValue" clearable placeholder="搜索" />
          </div>

          <div class='currencies-category'>
            <van-tabs v-model="activeList" @click-tab="onClickTab">
              <van-tab title="常见问题" name="1"></van-tab>
              <van-tab title="账户" name="2"></van-tab>
              <van-tab title="支付" name="3"></van-tab>
              <van-tab title="其他" name="4"></van-tab>
            </van-tabs>
          </div>

          <div class="collapse-box">
            <van-collapse :border="false" v-model="activeNames" @change="collapseChange">
              <div v-for="(item, idx) in collapseList" :key="idx">
                <van-collapse-item :border="false" :title="item.title" :name="idx">
                  {{ item.info }}
                </van-collapse-item>
                <div v-if="!activeNames.includes(idx)" class="collapse-box-bottom">
                </div>
              </div>
            </van-collapse>
          </div>
        </div>
        <div v-else>
          <div class="collapse-box">
            <van-collapse  :border="false">
                <van-collapse-item   :border="false" title="在线客服">
                 <<template #right-icon>
                  <div class="right-jt">
                    <img :src="rightJt" />
                  </div>
                 </template>>
                </van-collapse-item>
                <div class="collapse-box-bottom">
                </div>
            </van-collapse>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.help-center-box {
  padding: 8px 10px;

  &-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    background-color: #f0f0f0;
    padding: 1.5px;
    height: 20px;
    width: 100%;
    border-radius: 4px;

    :deep(.van-tabs__wrap) {
      height: 40px;
    }

    :deep(.van-tabs) {
      width: 100%;
    }

    :deep(.van-tab--card) {
      font-size: 7px;
      font-weight: 400;
      color: #565B6E;
      border: none;
    }

    :deep(.van-tab--card.van-tab--active) {
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0px 1px 2px 0px #0000001A;
      font-size: 7px;
      font-weight: 500;
      color: #2C2C2C;
    }

    :deep(.van-tabs__nav--card) {
      margin: 0;
      border: none;
      height: 100%;
      background-color: #f0f0f0;
    }
  }

  .currencies-category {
    margin-top: 8px;

    :deep(.van-tab) {
      height: 17px;
      border-radius: 30px;
      margin-right: 4px;
    }

    :deep(.van-tab--active) {
      background: #1642F4;
      color: #fff;
    }

    :deep(.van-tabs__line) {
      display: none;
    }
  }

  .collapse-box {
    margin-top: 6px;

    :deep(.van-cell) {
      background-color: #f9f9f9;
      border: 1px solid #EDEDED;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      padding-bottom: 0;
      padding-top:6px;
    }

    .collapse-box-bottom {
      background-color: #f9f9f9;
      border: 1px solid #EDEDED;
      border-top: none;
      border-radius: 0 0 6px 6px;
      height: 10px;
      margin-top: -10px;
      margin-bottom: 6px;
    }

    :deep(.van-collapse-item__content) {
      background-color: #f9f9f9;
      border: 1px solid #EDEDED;
      border-top: none;
      border-radius: 0 0 6px 6px;
      padding-top: 1px;
    }

    :deep(.van-collapse-item) {
      margin-bottom: 6px;
    }
  }
.right-jt{
  &>img{
    height:6px;
  }
}

}
</style>
